<template>
  <div class="flex justify-center items-center">
    <el-countdown
      v-show="!state.locked"
      class="text-[12px]"
      :class="{
        'red-text': state.reded
      }"
      :format="state.format"
      :value="formatSecond(CloseTimeInt)"
      @finish="lockedFinish"
      @change="handleChange"
    />
    <el-countdown
      v-show="direction && state.locked && !state.opened"
      class="text-[12px]"
      :format="state.format"
      :value="formatSecond(OpenTimeInt)"
      @finish="openedFinish"
    />
    <span
      class="text-[#D10100] font-[500] mr-[5px] block leading-none"
      v-show="state.locked && !state.opened"
      >(封盘中)</span
    >
    <span
      class="text-[#EA7500] font-[500] mr-[5px] leading-none"
      v-show="state.locked && state.opened"
      >开奖中</span
    >
  </div>
</template>
<script setup lang="ts">
import { diffTime, formatDayjs } from "@/utils/common";

const state = reactive({
  locked: false,
  opened: false,
  reded: false,
  format: "HH:mm:ss"
});
const props = defineProps({
  NextTime: {
    type: String,
    default: ""
  },
  CloseTime: {
    type: String,
    default: ""
  },
  direction: {
    type: String,
    default: true
  }
});

const CloseTimeInt = ref();
const OpenTimeInt = ref();
const emit = defineEmits(["update"]);
const countdownFormat = (time: number) => {
  const hours = Math.floor(time / (1000 * 60 * 60));
  return hours > 0 ? "HH:mm:ss" : "mm:ss"; // 有小时就显示 HH:mm:ss, 没有小时就显示 mm:ss
};
const formatSecond = (time: number) => {
  try {
    let timer = time;
    if (timer <= 0) {
      return 0;
    } else {
      return timer;
    }
  } catch (error) {
    return 0;
  }
};
const setCloseTime = (val: string) => {
  let timer = diffTime(val);
  CloseTimeInt.value = formatDayjs(val, false);
  state.format = countdownFormat(timer);
  if (timer <= 0) {
    state.locked = true;
  } else {
    state.locked = false;
  }
};
const setOpenTime = (val: string) => {
  let timer = diffTime(val);
  OpenTimeInt.value = formatDayjs(val, false);
  state.format = countdownFormat(timer);
  if (timer <= 0) {
    state.opened = true;
  } else {
    state.opened = false;
  }
};
const handleChange = (time: number) => {
  if (time / 1000 < 10) {
    state.reded = true;
  } else {
    state.reded = false;
  }
};

const lockedFinish = () => {
  state.locked = true;
};

let timer: any;
const openedFinish = () => {
  state.opened = true;
  timer = setInterval(() => {
    emit("update");
  }, 5000);
};

watch(
  () => props.NextTime,
  val => {
    if (val) {
      setOpenTime(val);
      clearInterval(timer);
      timer = null;
    }
  }
);

watch(
  () => props.CloseTime,
  val => {
    if (val) {
      setCloseTime(val || props.NextTime);
    }
  }
);
onMounted(() => {
  setCloseTime(props.CloseTime || props.NextTime);
  setOpenTime(props.NextTime);
});
</script>
<style lang="scss" scoped>
:deep(.el-statistic__number) {
  font-size: 13px !important;
  color: #555;
}
:deep(.el-statistic__content) {
  font-size: 13px !important;
}
.red-text {
  :deep(.el-statistic__number) {
    color: #bc2e2d;
  }
}
</style>
